<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no" />
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<style type="text/css">
	*{
	    margin:0;
	    padding:0;
	}

	body{
	    font:15px/1.3 'Open Sans', sans-serif;
	    color: #5e5b64;
	    text-align:center;
	}

	a, a:visited {
	    outline:none;
	    color:#389dc1;
	}

	a:hover{
	    text-decoration:none;
	}

	section, footer, header, aside, nav{
	    display: block;
	}

	/*-------------------------
	    The menu
	--------------------------*/

	nav{
	    display:inline-block;
	    margin:60px auto 45px;
	    background-color:#5597b4;
	    box-shadow:0 1px 1px #ccc;
	    border-radius:2px;
	}

	nav a{
	    display:inline-block;
	    padding: 18px 30px;
	    color:#fff !important;
	    font-weight:bold;
	    font-size:16px;
	    text-decoration:none !important;
	    line-height:1;
	    text-transform: uppercase;
	    background-color:transparent;

	    -webkit-transition:background-color 0.25s;
	    -moz-transition:background-color 0.25s;
	    transition:background-color 0.25s;
	}

	nav a:first-child{
	    border-radius:2px 0 0 2px;
	}

	nav a:last-child{
	    border-radius:0 2px 2px 0;
	}

	nav.home .home,
	nav.projects .projects,
	nav.services .services,
	nav.contact .contact{
	    background-color:#e35885;
	}

	p{
	    font-size:22px;
	    font-weight:bold;
	    color:#7d9098;
	}

	p b{
	    color:#ffffff;
	    display:inline-block;
	    padding:5px 10px;
	    background-color:#c4d7e0;
	    border-radius:2px;
	    text-transform:uppercase;
	    font-size:18px;
	}


	</style>
</head>
<body>

	<div id="main">
	    <navbox v-model="id"></navbox>
	</div>
	
	<template id="nav-box">
		<div>
			{{value}}
			<!-- <mynav v-model="value"></mynav> -->
			<mynav v-model="active"></mynav>
		</div>
	</template>

	
	<template id="nav-templ">

		<div>
			<div>{{value}}</div>
			<button v-on:click="changeValue">change vaule</button>
		</div>

	</template>
	
	<script type="text/javascript">
	
	Vue.component('navbox',{
		template:'#nav-box',
		props:['value'],
		data: function(){
			return {active: 'home'}
		}
	})


	Vue.component('mynav',{
		template:'#nav-templ',
		props:['value'],
		created:function(){
			// this.show();
		},
		methods:{
			show:function(){

				alert(this.value);

			},
			changeValue:function(){

				var random = Math.random();
				this.$emit('input',random);
				this.$parent.$emit('input',random);

			}
		}
		
	})

	// Creating a new Vue instance and pass in an options object.
	var demo = new Vue({
	    el: '#main',
	    data: function(){
			return {id: '1111'}
		}
	});


	</script>

</body>
</html>